<template>
  <div class="search">

    <!--<el-select-->
    <!--    v-model="name"-->
    <!--    multiple-->
    <!--    filterable-->
    <!--    remote-->
    <!--    reserve-keyword-->
    <!--    placeholder="输入商品信息"-->
    <!--    :remote-method="search"-->
    <!--    :loading="loading">-->
    <!--  <el-option-->
    <!--      v-for="item in products"-->
    <!--      :key="item.value"-->
    <!--      :label="item.name"-->
    <!--      :value="item.id">-->
    <!--  </el-option>-->
    <!--</el-select>-->
    <el-input v-model="name" size="small" placeholder="输入商品名称" suffix-icon="el-icon-search" @change="search"></el-input>
    <!--<el-select v-model="value" placeholder="请选择">-->
      <el-option
          v-for="item in products"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    <!--</el-select>-->

    <!--<input class="search__core" :placeholder="placeholder" v-model="key" />-->
    <!--<button class="search__btn" @click.prevent="search">搜索</button>-->
  </div>
</template>

<script>
import { ref, defineComponent, onMounted } from '@vue/composition-api';
import {getProductByEs} from '../api/user/product'

export default defineComponent({
  props: {
    placeholder: String,
    name: '',
    products:[],
    loading: true
  },
  setup(props, { emit }) {
    const key = ref('');

    // onMounted(() => {
    //
    // })
    const search = (name) => {
      getProductByEs(name).then(response => {
        console.log(11111111)
        props.products = response.data.products;
        console.log("search products")
        console.log(this.products)
      }).catch(error => {
        console.log(2323232)
        console.log(error)
      })

      // emit('search', key.value);
    };

    return { key, search };
  },

});
</script>



<style lang="less" scoped>
.search {
  position: relative;

  &__core {
    box-sizing: border-box;
    vertical-align: middle;
    background: none;
    outline: none;
    height: 24px;
    border: 2px solid rgb(255, 48, 48);
    background-color: #fff;
    padding-left: 10px;
  }
  &__btn {
    vertical-align: middle;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 24px;
    margin: 0px;
    outline: none;
    border: 2px solid rgb(255, 48, 48);
    background: rgb(255, 48, 48);
    color: #fff;
    cursor: pointer;
  }
}
</style>
